<template>
  <el-dialog
    title="个人信息"
    :visible.sync="InfoVisible"
    width="100%"
    @close="editDialogclosed"
  >
    <!-- 内容主体区域 -->
    <el-row :gutter="24">
      <el-col :span="12">
        <el-card>
          <el-form :model="editForm" ref="editFormRef" label-width="70px">
            <el-row :gutter="20">
              <el-col :span="8">
                <div>
                  <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </div>
              </el-col>
              <el-col :span="12">
                <!-- 用户名 -->
                <el-form-item label="账号" prop="username">
                  <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
                <!-- 昵称 -->
                <el-form-item label="昵称" prop="name">
                  <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item label="密码" prop="password">
                  <el-input
                    type="password"
                    v-model="editForm.password"
                  ></el-input>
                </el-form-item>
                <!-- 年龄 -->
                <el-form-item label="年龄" prop="age">
                  <el-input v-model="editForm.age"></el-input>
                </el-form-item>
                <!-- 性别 -->
                <el-form-item label="性别" prop="sex">
                  <el-input v-model="editForm.sex"></el-input>
                </el-form-item>
                <!-- 手机 -->
                <el-form-item label="手机" prop="phone">
                  <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item label="邮箱" prop="email">
                  <el-input v-model="editForm.email"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <el-row :gutter="24">
            <el-col :span="3">
              <el-avatar> user </el-avatar>
            </el-col>
            <el-col :span="21">
              <el-descriptions title="">
                <el-descriptions-item label="账号">
                  <el-tag size="small">admin</el-tag></el-descriptions-item
                >
                <el-descriptions-item label="密码">123456</el-descriptions-item>
                <el-descriptions-item label="昵称">刘大牛</el-descriptions-item>
                <el-descriptions-item label="角色">
                  <el-tag size="small">管理员</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="性别">男</el-descriptions-item>
                <el-descriptions-item label="手机号"
                  >15555466741</el-descriptions-item
                >
                <el-descriptions-item label="邮箱"
                  >qq@.com</el-descriptions-item
                >
                <el-descriptions-item label="年龄">34</el-descriptions-item>
                <el-descriptions-item label="联系地址"
                  >江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item
                >
              </el-descriptions>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <!-- 底部按钮区域 -->
      <el-button @click="InfoVisible = false">取 消</el-button>
      <el-button type="primary" @click="PutPassWord()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: '',
      // 获取到的用户信息
      editForm: {
        id: 2,
        username: "admin",
        name: "刘大牛",
        password: "123456",
        age: "34",
        sex: "男",
        phone: 15555466741,
        email: "qq@.com",
      },
      // 控制修改密码对话框的隐藏和显示，默认为false
      InfoVisible: false,
    };
  },
  methods: {
    // 监听修改密码对话框关闭事件
    editDialogclosed() {
      this.$refs.editFormRef.resetFields();
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
  },
};
</script>

<style scoped>
* {
}
.el-aside {
  text-align: center;
}
.el-menu {
  border: none;
}
.el-menu-item {
  border: none;
}
</style>
